<template>
  <div class="banner">
    <div class="banner_box">
      <p class="title">OPPO Find X7 Ultra</p>
      <p class="big_font">大师影像 更有分量</p>
      <img src="/img/font.jpg" alt="" />
    </div>
    <p class="remark">
      备注：画面示意为 Find X7 系列，产品图仅供参考，请以实物为准。
    </p>
  </div>
</template>

<style lang="scss" scoped>
.banner {
  height: 680px;
  padding: 0 60px;
  box-sizing: border-box;
  background-image: url(/public/img/Banner.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 -110px;
  .banner_box {
    width: 290px;
    height: 250px;
    text-align: left;
    position: relative;
    left: 30px;
    top: calc(50% - 150px);
    .tittle {
      font-size: 26px;
      font-weight: bold;
      margin-bottom: 24px;
    }
    .big_font {
      font-size: 60px;
      font-weight: bold;
      line-height: 84px;
      margin-bottom: 16px;
    }
    img {
      width: calc(100% - 20px);
    }
  }
  .remark {
    font-size: 12px;
    transform: scale(0.6);
    color: #f0f0f0;
    position: absolute;
    bottom: 26px;
    // left: 50px;
    left: 15px;
  }
}
</style>
